<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />

    <link rel="stylesheet" href="../css/index.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.4/swiper-bundle.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.4/swiper-bundle.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/animateBak.js"></script>

</head>

<body>
    <!-- 上方搜索框 -->
    <div class="maskwrap">
        <iframe src="../html/search.html" frameborder="0" scrolling="no"></iframe>
    </div>
    <div class="wrap">
        <!-- 首页头部轮播图 -->
        <div class="mask"></div>

        <div class="header">
            <!-- 引入头部导航栏 -->
            <div class="headerpage" id="headerpage">
                <iframe src="../html/header.html" frameborder="0" scrolling="no"></iframe>
            </div>
            <!-- 引入侧边导航 -->
            <div class="left-nav">

            </div>
            <!-- 首页轮播图 -->
            <div class="banner">
                <ul class="swiper">
                    <li class="ban1">
                        <a href="#"><img src="../images/banner1.jpg" alt=""></a>
                    </li>
                    <li class="ban2">
                        <a href="#"><img src="../images/banner2.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="huadong">
                    <img src="../images/huadong.png" alt="">
                </div>
            </div>

        </div>

        <!-- 本周新品 -->
        <div class="weekNew main-item">
            <!-- 跳转商品页 -->
            <a href="#">
                <div class="viewmore">VIEW MORE &nbsp;+</div>
                <img src="../images/newpr.jpg" alt="">
            </a>
        </div>

        <!-- 新季魅力 -->
        <div class="main-item div1">
            <div class="item-top">
                <h2>KICK&nbsp;&nbsp;YOUR&nbsp;&nbsp;STYLE</h2>
                <p>新季魅力</p>
            </div>
            <div class="item-img">
                <div class="item">
                    <a href="">
                        <div class="viewmore">VIEW MORE &nbsp;+</div>
                        <img src="../images/item2-1.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="viewmore">VIEW MORE &nbsp;+</div>
                        <img src="../images/item2-2.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="viewmore">VIEW MORE &nbsp;+</div>
                        <img src="../images/item2-3.jpg" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <div class="viewmore">VIEW MORE &nbsp;+</div>
                        <img src="../images/item2-4.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 品味时尚 -->
        <div class="main-item div2">
            <div class="item-top">
                <h2>MAGAZINE</h2>
                <p>品味时尚</p>
            </div>
            <div class="swpitem">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-con">
                                <div class="left-desc">
                                    <div class="desc-con">
                                        <p>The weekend edit</p>
                                        <h3>春日野餐特辑</h3>
                                        <div class="swip-btn">
                                            <a href="#">2022 Mar.</a>
                                            <a href="#" class="a2">
                                                VIEW MORE &nbsp;+
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-con">
                                    <a href="#">
                                        <img src="../images/item3-1.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-con">
                                <div class="left-desc">
                                    <div class="desc-con">
                                        <p>OOTD OF 2022SS</p>
                                        <h3>前方，春日秀场</h3>
                                        <div class="swip-btn">
                                            <a href="#">2022 Feb.</a>
                                            <a href="#" class="a2">
                                                VIEW MORE &nbsp;+
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-con">
                                    <a href="#">
                                        <img src="../images/item3-2.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-con">
                                <div class="left-desc">
                                    <div class="desc-con">
                                        <p>Dramatic style</p>
                                        <h3>It's 千禧女士</h3>
                                        <div class="swip-btn">
                                            <a href="#">2022 Mar.</a>
                                            <a href="#" class="a2">
                                                VIEW MORE &nbsp;+
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-con">
                                    <a href="#">
                                        <img src="../images/item3-3.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-con">
                                <div class="left-desc">
                                    <div class="desc-con">
                                        <p>Make it simple</p>
                                        <h3>“配”角光环 春日焕新</h3>
                                        <div class="swip-btn">
                                            <a href="#">2022 Mar.</a>
                                            <a href="#" class="a2">
                                                VIEW MORE &nbsp;+
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-con">
                                    <a href="#">
                                        <img src="../images/item3-4.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-con">
                                <div class="left-desc">
                                    <div class="desc-con">
                                        <p>MEN'S OOTD</p>
                                        <h3>今日，浅帅一下</h3>
                                        <div class="swip-btn">
                                            <a href="#">2022 Mar.</a>
                                            <a href="#" class="a2">
                                                VIEW MORE &nbsp;+
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-con">
                                    <a href="#">
                                        <img src="../images/item3-5.jpg" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>


        <!-- 发现风格 -->
        <div class="main-item div3">
            <div class="item-top">
                <h2>CAMPAIGN</h2>
                <p>发现风格</p>
            </div>
            <div class="videoitem">
                <video src="https://gw-img.ur.com.cn//urmall/3bec9059-06d4-4e21-8b0f-8842d0ea3893.mp4" controls></video>
            </div>
        </div>

        <!-- 店铺详情 -->
        <div class="main-item div4">
            <div class="item-top">
                <h2>STORE&nbsp;&nbsp;LOCATION</h2>
                <p>店铺详情</p>
            </div>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../images/item4-1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/item4-2.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>

        <!-- 脚部商标 -->
        <div class="footer-con">

        </div>
    </div>

    <script src="../js/index.js"></script>
    <script>
        // 引入头部
        // $('.headerpage').load("./header.html");   
        // 引入左边导航
        $(".left-nav").load("./navleft.html");
        // 引入脚部页面
        $('.footer-con').load("./footer.html");
    </script>
</body>

</html>